<template>
  <footer class="bg-dark-light border-t border-gray-custom mt-16">
    <div class="container mx-auto px-4 py-10">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center">
              <i class="fa fa-cube text-white text-sm"></i>
            </div>
            <span class="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-400">科技创客空间</span>
          </div>
          <p class="text-gray-400 text-sm mb-4">分享3D打印、电子DIY和软件开发的知识与经验，探索科技的无限可能。</p>
          <div class="flex space-x-4">
            <a href="#" class="w-8 h-8 rounded-full bg-gray-custom/30 hover:bg-primary/80 flex items-center justify-center transition-colors">
              <i class="fa fa-github text-gray-300 text-sm"></i>
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-custom/30 hover:bg-primary/80 flex items-center justify-center transition-colors">
              <i class="fa fa-twitter text-gray-300 text-sm"></i>
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-custom/30 hover:bg-primary/80 flex items-center justify-center transition-colors">
              <i class="fa fa-youtube-play text-gray-300 text-sm"></i>
            </a>
            <a href="#" class="w-8 h-8 rounded-full bg-gray-custom/30 hover:bg-primary/80 flex items-center justify-center transition-colors">
              <i class="fa fa-instagram text-gray-300 text-sm"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h3 class="text-white font-semibold mb-4">快速链接</h3>
          <ul class="space-y-2 text-sm">
            <li><router-link to="/" class="text-gray-400 hover:text-primary transition-colors">首页</router-link></li>
            <li><router-link to="/categories" class="text-gray-400 hover:text-primary transition-colors">分类</router-link></li>
            <li><router-link to="/tags" class="text-gray-400 hover:text-primary transition-colors">标签</router-link></li>
            <li><router-link to="/about" class="text-gray-400 hover:text-primary transition-colors">关于我</router-link></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">联系方式</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-white font-semibold mb-4">订阅更新</h3>
          <p class="text-gray-400 text-sm mb-4">订阅我的博客更新，获取最新的科技教程和项目分享。</p>
          <div class="flex">
            <input type="email" placeholder="你的邮箱地址" class="flex-grow bg-gray-custom/30 border border-gray-custom rounded-l-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
            <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="border-t border-gray-custom/50 mt-8 pt-8 text-center text-gray-500 text-sm">
        <p>© 2023 科技创客空间. 保留所有权利.</p>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

<style scoped>
/* 页脚特定样式 */
</style>
    